<template>
  <div class="level" :class="alertClass">
    <span>{{ alertText }}</span>
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    alertClass() {
      return `level${this.level}`;
    },
    alertText() {
      switch (this.level) {
        case 1:
          return "一级告警";
        case 2:
          return "二级告警";
        case 3:
          return "三级告警";
        default:
          return "未知告警";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.level {
  background: url('../assets/tag1.png') left center no-repeat;
  background-size: 56px 28px;
  min-width: 56px;
  height: 28px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  span {
    font-size: 14px;
    font-family: AlimamaShuHeiTi;
    font-weight: bold;
    color: #FFFFFF;
    background: linear-gradient(0deg, #04ccfe 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 10px;
  }
}

.level1 {
  background: url('../assets/tag1.png') left center no-repeat;
  background-size: 56px 28px;

  span {
    font-size: 14px;
    font-family: AlimamaShuHeiTi;
    font-weight: bold;
    color: #FFFFFF;
    background: linear-gradient(0deg, #04ccfe 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 10px;
  }
}

.level2 {
  background: url('../assets/tag2.png') left center no-repeat;
  background-size: 56px 28px;

  span {
    background: linear-gradient(0deg, #f5bb09 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.level3 {
  background: url('../assets/tag3.png') left center no-repeat;
  background-size: 56px 28px;

  span {
    background: linear-gradient(0deg, #ff7505 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>

